import React from 'react';
import { Layout, Menu } from 'antd';
import { Route, Switch, Link } from 'react-router-dom';
import {
  TeamOutlined,
  PlayCircleOutlined,
  HomeOutlined,
  BarChartOutlined,
  FileTextOutlined,
  ApartmentOutlined,
} from '@ant-design/icons';
import Chart from '../pages/content/Chart';
import Introduction from '../pages/content/Introduction';
import Guidance from '../pages/content/Guidance';
import Principle from '../pages/content/Principle';
import Use from '../pages/content/Use';
import Bilibili from '../pages/content/Bilibili';
import Douban from '../pages/content/Douban';
import './MyLayout.css';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
//eslint-disable-next-line
export default prop => {
  const f = obj => {};
  return (
    <Layout style={{ minHeight: '100vh', marginLeft: 200 }}>
      <Sider
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
        }}
      >
        <Link to="/">
          <div className="logo" style={{ padding: 20 }}>
            <HomeOutlined style={{ color: '#ffffff', fontSize: 20 }} />
          </div>
        </Link>
        <Menu
          theme="dark"
          defaultSelectedKeys={['1']}
          mode="inline"
          defaultOpenKeys={['sub1']}
          onClick={f}
        >
          <SubMenu key="sub1" icon={<FileTextOutlined />} title="文档">
            <Menu.Item key="1">
              <Link to="/content/introduction">项目介绍</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/content/guidance">使用指南</Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to="/content/principle">算法原理</Link>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="4" icon={<PlayCircleOutlined />}>
            <Link to="/content/use">开始使用</Link>
          </Menu.Item>
          <Menu.Item key="5" icon={<BarChartOutlined />}>
            <Link to="/content/chart">性能分析</Link>
          </Menu.Item>
          {/* <SubMenu key="sub2" icon={<ApartmentOutlined />} title="算法应用">
            <Menu.Item key="9">
              <Link to="/content/bilibili">B站Up</Link>
            </Menu.Item> */}
          <Menu.Item key="10" icon={<ApartmentOutlined />}>
            <Link to="/content/douban">算法应用</Link>
          </Menu.Item>
          {/* </SubMenu> */}
          <SubMenu key="sub3" icon={<TeamOutlined />} title="团队">
            <Menu.Item key="6">Team 1</Menu.Item>
            <Menu.Item key="7">Team 2</Menu.Item>
            <Menu.Item key="8">Team 3</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="header" style={{ padding: 0 }}>
          <h2>基于多任务学习的符号网络结构平衡计算系统</h2>
        </Header>
        <Content style={{ margin: '0 16px' }}>
          <div style={{ margin: '16px 0' }}></div>
          <div className="site-layout-background" style={{ padding: 24, minHeight: '100vh' }}>
            <Switch>
              <Route path="/content/chart" component={Chart} />
              <Route path="/content/introduction" component={Introduction} />
              <Route path="/content/guidance" component={Guidance} />
              <Route path="/content/principle" component={Principle} />
              <Route path="/content/use" component={Use} />
              <Route path="/content/bilibili" component={Bilibili} />
              <Route path="/content/douban" component={Douban} />
            </Switch>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>The Project Created by Chen</Footer>
      </Layout>
    </Layout>
  );
};
